<template>
  <div class="all">
    <div class="main">
      <!-- 头部状态栏 -->
      <div class="header">
        <span>Status</span>
        <span v-for="(item,index) in ChooseList" :key="index">
          {{item.value}}
        </span>
      </div>
      <div class="content">
        <div class="CheckBox">
          <!-- 全选 -->
          <div class="CheckAll">
            <div :class="['select',SelectVal.length==CheckList.length?'selectActv':'']" @click="allFun()">
            </div>
            <span>SelectAll</span>
          </div>
          <!-- 单选 -->
          <div class="CheckItem" v-for="(item,index) in CheckList" :key="index">
            <div :class="['select',SelectVal.includes(item.value)?'selectActv':'']" @click="selectFun(item.value)">
            </div>
            <span>{{item.label}}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      //列数
      // columns: 3,
      // 已选列表
      SelectVal: [],
      CheckList: [
        { value: 1, label: "a" },
        { value: 2, label: "b" },
        { value: 3, label: "c" },
        { value: 4, label: "d" },
        { value: 5, label: "e" },
        { value: 6, label: "f" },
        { value: 7, label: "g" },
        { value: 8, label: "h" },
        { value: 9, label: "i" },
        { value: 10, label: "j" },
        { value: 11, label: "k" },
        { value: 12, label: "l" },

      ],
    };
  },
  computed: {
    // 被选中项的集合
    ChooseList() {
      return this.CheckList.filter((item) => {
        if (this.SelectVal.includes(item.value)) {
          return item
        }
      })
    }
  },
  methods: {
    selectFun(value) {
      if (!this.SelectVal.includes(value)) {
        this.SelectVal.push(value) // 判断已选列表中是否存在该id，不是则追加进去
      } else {
        let index = this.SelectVal.indexOf(value) // 求出当前id的所在位置
        this.SelectVal.splice(index, 1) // 否则则删除
      }
    },
    // 全选、反选
    allFun() {
      if (this.SelectVal.length == this.CheckList.length) {
        this.SelectVal = [] // 判断是否已全部选中，是则清空已选列表
      } else {
        this.CheckList.forEach((item) => {
          if (!this.SelectVal.includes(item.value)) {
            this.SelectVal.push(item.value) // 否则将未选中的全部加入已选列表中
          }
        })
      }
    },
  }
};
</script>
<style scoped>
* {
  color: #333;
  box-sizing: border-box;
  user-select: none;
}

.all {
  width: 370px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #3371fe;

}

/* 主要内容部分 */
.main {
  width: 350px;
  margin: 0 auto;
}

/* 头部状态栏 */
.header {
  margin-top: 10px;
  padding-left: 10px;
  font-size: 20px;
  background-color: #dadada;

}

/* 复选框盒子整体 */
.content {
  width: 350px;
  background-color: #f7f7f9;
}

.CheckBox {
  margin: 10px;
  display: flex;
  flex-wrap: wrap;
  width: 320px;
  border: 1px solid #e0e1e1;
  background-color: #fff;
  /* box-shadow: 5px 5px 5px 5px #e0e1e1; */
}

/* 全选、单选框的样式 */
.CheckAll,
.CheckItem {
  display: flex;
  /* 此处的宽度分为几等分决定了列数 */
  width: calc(100%/3);
  align-items: center;
}

/* 选中复选框之前 */
.select {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  cursor: pointer;
  margin-right: 10px;
  align-items: center;
}

/* 选中复选框之后 */
.selectActv::before {
  display: block;
  content: "";
  width: 5px;
  height: 12px;
  border-bottom: 2px solid #aaa;
  border-right: 2px solid #aaa;
  transform: rotate(45deg);
}
</style>